<template>
	<view class="content">
		<!-- 第一部分：待办事项 -->
		<view class="toDo">
			<view class="toDo_head">
				待办事项
			</view>
			<view class="toDo_pack">
				<view class="toDo_list" @click="toDelivered">
					<image src="../../static/image/index/Delivered.png" mode=""></image>
					<view class="span">
						待发货
					</view>
					<!-- <u-badge type="error" count="7"></u-badge> -->
					<view class="num" v-show="1>0?!isNum:isNum">
						12
					</view>
				</view> 
				<view class="toDo_list" @click="toWarehousing">
					<image src="../../static/image/index/Check.png" mode=""></image>
					<view class="span">
						入库待确认
					</view>
					<view class="num" v-show="1>0?!isNum:isNum">
						12
					</view>
				</view> 
				<view class="toDo_list" @click="toSafeguarding">
					<image src="../../static/image/index/Safeguar.png" mode=""></image>
					<view class="span">
						维权订单
					</view>
					<view class="num" v-show="1>0?!isNum:isNum">
						12
					</view>
				</view> 
				<view class="toDo_list" @click="toCheck">
					<image src="../../static/image/index/Warehousing.png" mode=""></image>
					<view class="span">
						库存盘点
					</view>
					<view class="num" v-show="1>0?!isNum:isNum">
						12
					</view>
				</view> 
			</view>
		</view>
		<!-- 第二部分统计 -->
		<view class="Statisticstitle">
			交易统计
		</view>
		<view class="Statistics">
			<view class="stat_main" @click="toStatistcal" v-for="(item,index) in statList" :key="index">
				<view class="title">
					<image src="../../static/image/index/time.png" mode="" style="margin: 0  16rpx 0 0;"></image>
					{{item.name}}
				</view>
				<!-- 订单数 -->
				<view class="order">
					<view class="order_span">
						订单数：
					</view>
					<view class="order_msg">
						{{item.order}}
					</view>
				</view>
				<!-- 交易额 -->
				<view class="money">
					<view class="money_span">
						交易额：
					</view>
					<view class="money_msg">
						{{item.money}}元
					</view>
				</view>
			</view>
		</view>
		<!-- 第三部分趋势图 -->
		<view class="Trend">
			<view class="title">
				订单趋势图
			</view>
			<view class="Trend_main">
				折线图
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// isNum: false;
			return {
				statList: [{
					name: '今日统计',
					order: '100',
					money: '100'
				}, {
					name: '近七日统计',
					order: '100',
					money: '100'
				}, {
					name: '本月统计',
					order: '100',
					money: '100'
				}],
				isNum: false
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转订单待发货
			toDelivered:function(){
				uni.navigateTo({
					url:'../order/Delivered'
				})
			},
			//跳转入库待确认
			toWarehousing:function(){
				uni.navigateTo({
					url:'../Inventory/schedulingRecord/recordSheet',	
				})
			},
			//跳转维权订单
			toSafeguarding:function(){
				uni.navigateTo({
					url:'../order/Safeguarding'
				})
			},
			//跳转库存盘点
			toCheck:function(){
				uni.navigateTo({
					url:'../Inventory/inventoryChecking/checkingIndex'
				})
			},
			//跳转统计详情
			toStatistcal:function(){
				uni.navigateTo({
					url:'./Statistical'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		margin-bottom: 100rpx;
	}
	.toDo {
		width: 750rpx;
		height: auto;

		.toDo_head {
			margin: 48rpx 0 54rpx 30rpx;
			width: 128rpx;
			height: 48rpx;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(77,77,77,1);
			text-align: left;
		}

		.toDo_pack {
			display: flex;
			justify-content: space-evenly;
			width: 750rpx;

			// height: 180rpx;
			.toDo_list {
				position: relative;

				image {
					width: 88rpx;
					height: 88rpx;
				}

				.span {
					margin-top: 22rpx;
					width: 140rpx;
					height: 42rpx;
					color: rgba(80, 80, 80, 1);
					font-size: 28rpx;
					line-height: 42rpx;
					text-align: center;
					margin-left: -20rpx;
				}

				.num {
					position: absolute;
					top: -16rpx;
					right: 16rpx;
					width: 44rpx;
					height: 44rpx;
					color: rgba(255, 255, 255, 1);
					background-color: rgba(255, 0, 0, 1);
					border-radius: 28rpx;
					font-size: 23rpx;
					line-height: 44rpx;
					text-align: center;
				}

			}
		}

	}
	.Statisticstitle{
		margin-top: 130rpx;
		margin-bottom: 31rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(77,77,77,1);
		margin: 48rpx 0 54rpx 30rpx;
	}

	.Statistics {
		width: 750rpx;
		height: auto;
		
		display: flex;
		justify-content: space-around;

		.stat_main {
			width: 220rpx;
			height: 200rpx;
			color: rgba(80, 80, 80, 1);
			// background-color: rgba(248, 247, 247, 1);
			font-size: 16rpx;
			line-height: 150%;
			text-align: center;
			border-radius:24rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 3rpx 25rpx 0rpx rgba(51,51,51,0.2);
			.title {
				color: rgba(80, 80, 80, 1);
				font-size: 24rpx;
				line-height: 150%;
				font-weight: bold;
				margin-bottom: 28rpx;
				margin-top: 34rpx;
				position: relative;
				image{
					width: 30rpx;
					height: 24rpx;
				}
			}

			.order {
				display: flex;
				color: rgba(80, 80, 80, 1);
				font-size: 16rpx;
				line-height: 150%;
				text-align: left;
				margin-left: 20rpx;
			}

			.money {
				display: flex;
				color: rgba(80, 80, 80, 1);
				font-size: 16rpx;
				line-height: 150%;
				text-align: left;
				margin-left: 20rpx;
			}
		}
	}

	.Trend {
		width: 700rpx;
		height: 480rpx;
		margin: 46rpx auto 18rpx;
		.title {
			width: 140rpx;
			height: 42rpx;
			color: rgba(80, 80, 80, 1);
			font-size: 28rpx;
			line-height: 150%;
			text-align: left;
		}
		.Trend_main{
			width: 640rpx;
			height: 480rpx;
			border: 2rpx solid #000000;
		}
	}
</style>
